<template>
  <div class="result-analysis-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">考试结果分析</h1>
      <div class="header-actions">
        <el-button @click="printResult">
          <el-icon><Printer /></el-icon>
          打印结果
        </el-button>
        <el-button @click="saveResult">
          <el-icon><Download /></el-icon>
          保存结果
        </el-button>
        <el-button type="primary" @click="backToMockExam">
          返回模拟考试
        </el-button>
      </div>
    </div>

    <!-- 考试概览 -->
    <div class="exam-overview">
      <el-card class="overview-card">
        <div class="overview-header">
          <h2>考试概览</h2>
          <div class="exam-basic-info">
            <span class="exam-type">{{ examResult.examType }}</span>
            <span class="exam-date">{{ examResult.examDate }}</span>
            <span class="exam-duration">用时：{{ examResult.duration }}分钟</span>
          </div>
        </div>
        
        <div class="overview-content">
          <!-- 分数卡片 -->
          <div class="score-card">
            <div class="score-number">{{ examResult.score }}</div>
            <div class="score-label">得分</div>
            <div class="score-rating">{{ getScoreRating(examResult.score) }}</div>
          </div>
          
          <!-- 考试统计 -->
          <div class="exam-stats">
            <div class="stat-item">
              <div class="stat-number">{{ examResult.totalQuestions }}</div>
              <div class="stat-label">总题数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number correct">{{ examResult.correctAnswers }}</div>
              <div class="stat-label">正确</div>
            </div>
            <div class="stat-item">
              <div class="stat-number incorrect">{{ examResult.incorrectAnswers }}</div>
              <div class="stat-label">错误</div>
            </div>
            <div class="stat-item">
              <div class="stat-number unanswered">{{ examResult.unansweredQuestions }}</div>
              <div class="stat-label">未答</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ examResult.accuracyRate }}%</div>
              <div class="stat-label">正确率</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 详细分析 -->
    <div class="detailed-analysis">
      <!-- 正确率图表 -->
      <el-card class="chart-card">
        <div class="chart-header">
          <h2>各题型正确率分析</h2>
          <el-select v-model="chartType" placeholder="选择图表类型" class="chart-select">
            <el-option label="柱状图" value="bar" />
            <el-option label="雷达图" value="radar" />
          </el-select>
        </div>
        
        <div class="chart-container">
          <div v-if="chartType === 'bar'" class="bar-chart">
            <el-table :data="questionTypeStats" style="width: 100%">
              <el-table-column prop="type" label="题型" width="120" />
              <el-table-column prop="total" label="题数" width="80" />
              <el-table-column prop="correct" label="正确" width="80" />
              <el-table-column prop="incorrect" label="错误" width="80" />
              <el-table-column prop="accuracyRate" label="正确率" width="120">
                <template #default="scope">
                  <div class="accuracy-cell">
                    <span class="accuracy-text">{{ scope.row.accuracyRate }}%</span>
                    <el-progress
                      :percentage="scope.row.accuracyRate"
                      :stroke-width="14"
                      :color="getAccuracyColor(scope.row.accuracyRate)"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="masteryLevel" label="掌握程度" width="120">
                <template #default="scope">
                  <el-tag :type="getMasteryLevelType(scope.row.masteryLevel)">
                    {{ getMasteryLevelText(scope.row.masteryLevel) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
          <div v-else-if="chartType === 'radar'" class="radar-chart">
            <div id="radarChart" style="width: 100%; height: 400px;"></div>
          </div>
        </div>
      </el-card>

      <!-- 错题分类 -->
      <el-card class="error-classification-card">
        <div class="classification-header">
          <h2>错题分类</h2>
          <el-select v-model="errorFilter" placeholder="按题型筛选" class="error-filter">
            <el-option label="全部" value="all" />
            <el-option v-for="type in questionTypes" :key="type.value" :label="type.label" :value="type.value" />
          </el-select>
        </div>
        
        <div class="error-list">
          <div v-if="filteredErrorQuestions.length === 0" class="no-errors">
            <el-empty description="暂无错题" />
          </div>
          
          <div v-else class="error-questions">
            <el-collapse v-model="activeErrorPanel">
              <el-collapse-item
                v-for="error in filteredErrorQuestions"
                :key="error.id"
                :title="`第${error.questionNumber}题（${getQuestionTypeName(error.type)}）`"
                :name="error.id"
              >
                <div class="error-question-detail">
                  <div class="question-text">{{ error.question }}</div>
                  
                  <div class="question-options">
                    <div
                      v-for="(option, key) in error.options"
                      :key="key"
                      :class="[
                        'option-item',
                        { 'your-answer': key === error.yourAnswer },
                        { 'correct-answer': key === error.correctAnswer }
                      ]"
                    >
                      <span class="option-label">{{ key }}.</span>
                      <span class="option-content">{{ option }}</span>
                      <span v-if="key === error.yourAnswer" class="answer-tag your">你的答案</span>
                      <span v-if="key === error.correctAnswer" class="answer-tag correct">正确答案</span>
                    </div>
                  </div>
                  
                  <div class="error-analysis">
                    <h4>错误分析：</h4>
                    <p>{{ error.errorAnalysis }}</p>
                  </div>
                  
                  <div class="correct-solution">
                    <h4>正确解析：</h4>
                    <p>{{ error.correctSolution }}</p>
                  </div>
                  
                  <div class="error-tags">
                    <el-tag type="danger">需重点复习</el-tag>
                    <el-tag>{{ getQuestionTypeName(error.type) }}</el-tag>
                    <el-tag v-if="error.knowledgePoint" type="info">{{ error.knowledgePoint }}</el-tag>
                  </div>
                  
                  <div class="error-actions">
                    <el-button type="primary" @click="addToList(error.id)">
                      <el-icon><Star /></el-icon>
                      添加到错题本
                    </el-button>
                    <el-button @click="reviewRelated(error.id)">
                      <el-icon><BookOpen /></el-icon>
                      查看相关知识点
                    </el-button>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-card>

      <!-- 学习建议 -->
      <el-card class="recommendations-card">
        <div class="recommendations-header">
          <h2>学习建议</h2>
        </div>
        
        <div class="recommendations-content">
          <div class="recommendation-list">
            <div v-for="(recommendation, index) in learningRecommendations" :key="index" class="recommendation-item">
              <div class="recommendation-icon">
                <el-icon v-if="recommendation.type === 'strength'">
                  <CheckCircleFilled style="color: #67c23a;" />
                </el-icon>
                <el-icon v-else-if="recommendation.type === 'weakness'">
                  <WarningFilled style="color: #e6a23c;" />
                </el-icon>
                <el-icon v-else>
                  <InfoFilled style="color: #409eff;" />
                </el-icon>
              </div>
              <div class="recommendation-text">
                <h4>{{ recommendation.title }}</h4>
                <p>{{ recommendation.content }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 答题记录 -->
      <el-card class="answer-records-card">
        <div class="records-header">
          <h2>答题记录</h2>
        </div>
        
        <div class="records-content">
          <div class="timeline">
            <div v-for="record in answerTimeline" :key="record.id" class="timeline-item">
              <div class="timeline-dot" :class="record.type"></div>
              <div class="timeline-content">
                <div class="timeline-time">{{ record.time }}</div>
                <div class="timeline-text">
                  <span class="question-number">第{{ record.questionNumber }}题</span>
                  <span class="question-type">({{ getQuestionTypeName(record.type) }})</span>
                  <span class="answer-status" :class="record.type">
                    {{ record.type === 'correct' ? '回答正确' : (record.type === 'incorrect' ? '回答错误' : '未回答') }}
                  </span>
                  <span v-if="record.spentTime" class="spent-time">用时：{{ record.spentTime }}秒</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Printer,
  Download,
  Star,
  WarningFilled,
  InfoFilled
} from '@element-plus/icons-vue'

// 引入ECharts
import * as echarts from 'echarts'

// 路由
const router = useRouter()
const route = useRoute()

// 响应式数据
const chartType = ref<'bar' | 'radar'>('bar')
const errorFilter = ref('all')
const activeErrorPanel = ref<string[]>([])
let radarChartInstance: echarts.ECharts | null = null

// 考试结果数据
const examResult = reactive({
  id: route.params.examId as string || `exam-${Date.now()}`,
  examType: '全真模拟考试',
  examDate: new Date().toLocaleString('zh-CN'),
  duration: 95,
  score: parseInt(route.params.score as string) || 75,
  totalQuestions: 135,
  correctAnswers: 101,
  incorrectAnswers: 24,
  unansweredQuestions: 10,
  accuracyRate: 75
})

// 题目类型统计数据
const questionTypeStats = reactive([
  { type: '图形推理', total: 20, correct: 15, incorrect: 5, accuracyRate: 75, masteryLevel: 3 },
  { type: '定义判断', total: 15, correct: 12, incorrect: 3, accuracyRate: 80, masteryLevel: 4 },
  { type: '类比推理', total: 10, correct: 9, incorrect: 1, accuracyRate: 90, masteryLevel: 4 },
  { type: '逻辑判断', total: 20, correct: 14, incorrect: 6, accuracyRate: 70, masteryLevel: 3 },
  { type: '言语理解', total: 40, correct: 30, incorrect: 10, accuracyRate: 75, masteryLevel: 3 },
  { type: '数量关系', total: 15, correct: 8, incorrect: 7, accuracyRate: 53, masteryLevel: 2 },
  { type: '资料分析', total: 15, correct: 13, incorrect: 2, accuracyRate: 87, masteryLevel: 4 }
])

// 题目类型列表
const questionTypes = [
  { value: 'graphic', label: '图形推理' },
  { value: 'definition', label: '定义判断' },
  { value: 'analogy', label: '类比推理' },
  { value: 'logic', label: '逻辑判断' },
  { value: 'language', label: '言语理解' },
  { value: 'quantity', label: '数量关系' },
  { value: 'data', label: '资料分析' }
]

// 错题数据
const errorQuestions = reactive([
  {
    id: 'error-1',
    questionNumber: 3,
    type: 'graphic',
    question: '从所给的四个选项中，选择最合适的一个填入问号处，使之呈现一定的规律性。\n图形序列略...',
    options: {
      'A': '选项A',
      'B': '选项B',
      'C': '选项C',
      'D': '选项D'
    },
    yourAnswer: 'B',
    correctAnswer: 'A',
    errorAnalysis: '没有正确识别出图形的循环规律，需要加强对图形位置变化的观察能力。',
    correctSolution: '观察图形序列，发现每一个图形都是前一个图形向右循环移动一位的结果：○△□ → △□○ → □○△ → ○△□，因此正确答案是A选项□。',
    knowledgePoint: '图形位置变化规律'
  },
  {
    id: 'error-2',
    questionNumber: 12,
    type: 'definition',
    question: '受贿罪是指国家工作人员利用职务上的便利，索取他人财物，或者非法收受他人财物，为他人谋取利益的行为。\n下列属于受贿罪的是？',
    options: {
      'A': '某市政府采购中心主任在采购办公用品过程中，收受供应商红包5000元',
      'B': '某国有企业总经理利用职务便利，将本单位的盈利业务交由其弟弟经营',
      'C': '某高校教师利用教学之便，收取学生家长的感谢费10000元',
      'D': '某私营企业老板为了获得政府工程，向相关部门负责人行贿20万元'
    },
    yourAnswer: 'C',
    correctAnswer: 'A',
    errorAnalysis: '错误地认为高校教师属于国家工作人员，需要准确掌握国家工作人员的范围定义。',
    correctSolution: '根据定义，受贿罪的主体是国家工作人员。选项A中的政府采购中心主任属于国家工作人员，且有收受财物的行为，符合受贿罪的构成要件。选项C中的高校教师不属于国家工作人员，因此不构成受贿罪。正确答案是A选项。',
    knowledgePoint: '法律定义判断'
  },
  {
    id: 'error-3',
    questionNumber: 25,
    type: 'quantity',
    question: '某单位组织员工去旅游，要求每辆汽车坐的人数相同。如果每辆车坐20人，还剩下2名员工；如果减少一辆汽车，员工正好可以平均分到每辆汽车。问该单位共有多少名员工？',
    options: {
      'A': '242',
      'B': '244',
      'C': '246',
      'D': '248'
    },
    yourAnswer: 'B',
    correctAnswer: 'A',
    errorAnalysis: '计算错误，没有正确应用代数方程解决实际问题。',
    correctSolution: '设原来有x辆车，则员工人数为20x + 2。减少一辆车后，每辆车坐的人数为(20x + 2)/(x - 1)，这个数必须是整数。代入选项验证，只有A选项242满足条件：242 = 20×12 + 2，且242/(12 - 1) = 22，是整数。正确答案是A选项。',
    knowledgePoint: '代数方程应用'
  },
  {
    id: 'error-4',
    questionNumber: 48,
    type: 'logic',
    question: '如果所有的鸟都会飞，并且企鹅是鸟，那么企鹅会飞。从这个前提出发，需要加上下列哪一项前提，才能逻辑地推出“有些鸟不会飞”的结论？',
    options: {
      'A': '企鹅不会飞，并且企鹅是鸟',
      'B': '企鹅不会飞，并且企鹅不是鸟',
      'C': '企鹅会飞，并且企鹅是鸟',
      'D': '企鹅会飞，并且企鹅不是鸟'
    },
    yourAnswer: 'B',
    correctAnswer: 'A',
    errorAnalysis: '没有正确理解逻辑学中的反证法和矛盾推理。',
    correctSolution: '根据原命题：所有的鸟都会飞 ∧ 企鹅是鸟 → 企鹅会飞。要推出“有些鸟不会飞”，需要否定原命题的结论。根据逻辑学中的矛盾关系，如果企鹅是鸟但不会飞，那么原命题的前提“所有的鸟都会飞”就不成立，因此可以推出“有些鸟不会飞”。正确答案是A选项。',
    knowledgePoint: '逻辑学推理'
  },
  {
    id: 'error-5',
    questionNumber: 76,
    type: 'language',
    question: '依次填入下列各句横线处的词语，最恰当的一组是：\n①经过精心的治疗和护理，病人已不再剧烈咳嗽、出冷汗、昏厥，病情有了好转的______。\n②他们职业各异，经历不同，甚至素未往来，但对于文学的______兴趣使他们一见如故。',
    options: {
      'A': '症候 同一',
      'B': '症候 统一',
      'C': '征候 同一',
      'D': '征候 统一'
    },
    yourAnswer: 'B',
    correctAnswer: 'C',
    errorAnalysis: '对近义词的辨析不够准确，需要加强词语搭配的积累。',
    correctSolution: '“征候”指发生某种情况的迹象，“症候”指疾病的症状。句①中描述病情好转的迹象，应使用“征候”。“同一”指相同、一致，“统一”指将分散的集中成整体。句②中描述对文学的相同兴趣，应使用“同一”。正确答案是C选项。',
    knowledgePoint: '近义词辨析'
  }
])

// 学习建议数据
const learningRecommendations = [
  {
    type: 'strength',
    title: '类比推理表现优异',
    content: '您在类比推理题型上的正确率达到了90%，表现非常出色。这表明您对事物间的逻辑关系有很好的把握能力。'
  },
  {
    type: 'weakness',
    title: '数量关系需要加强',
    content: '您在数量关系题型上的正确率仅为53%，是所有题型中最低的。建议重点复习代数方程、几何计算等基础知识，并多做针对性练习。'
  },
  {
    type: 'weakness',
    title: '图形推理有待提高',
    content: '图形推理的正确率为75%，需要加强对图形位置变化、数量变化等规律的识别能力。建议系统学习图形推理的常见规律，并进行专项训练。'
  },
  {
    type: 'info',
    title: '答题速度控制',
    content: '本次考试用时95分钟，在规定时间内完成了大部分题目。但仍有10道题目未答，建议在平时练习中注意控制答题速度，合理分配时间。'
  },
  {
    type: 'info',
    title: '错题整理建议',
    content: '建议将本次考试中的错题整理到错题本中，并定期复习。重点关注错误原因和正确解析，避免在同一类型的题目上再次犯错。'
  }
]

// 答题时间轴数据
const answerTimeline = [
  { id: 't1', questionNumber: 1, type: 'correct', time: '00:01:30', spentTime: 25 },
  { id: 't2', questionNumber: 2, type: 'correct', time: '00:02:15', spentTime: 18 },
  { id: 't3', questionNumber: 3, type: 'incorrect', time: '00:03:40', spentTime: 45 },
  { id: 't4', questionNumber: 4, type: 'correct', time: '00:04:20', spentTime: 22 },
  { id: 't5', questionNumber: 5, type: 'correct', time: '00:05:05', spentTime: 30 },
  { id: 't6', questionNumber: 25, type: 'incorrect', time: '00:25:30', spentTime: 65 },
  { id: 't7', questionNumber: 48, type: 'incorrect', time: '00:45:15', spentTime: 80 },
  { id: 't8', questionNumber: 76, type: 'incorrect', time: '01:15:40', spentTime: 45 },
  { id: 't9', questionNumber: 125, type: 'unanswered', time: '01:35:00' },
  { id: 't10', questionNumber: 126, type: 'unanswered', time: '01:35:00' }
]

// 计算属性：过滤后的错题列表
const filteredErrorQuestions = computed(() => {
  if (errorFilter.value === 'all') {
    return errorQuestions
  }
  return errorQuestions.filter(q => q.type === errorFilter.value)
})

// 获取分数评级
const getScoreRating = (score: number) => {
  if (score >= 90) return '优秀'
  if (score >= 80) return '良好'
  if (score >= 70) return '中等'
  if (score >= 60) return '及格'
  return '不及格'
}

// 获取题目类型名称
const getQuestionTypeName = (type: string) => {
  const typeMap: Record<string, string> = {
    graphic: '图形推理',
    definition: '定义判断',
    analogy: '类比推理',
    logic: '逻辑判断',
    language: '言语理解',
    quantity: '数量关系',
    data: '资料分析'
  }
  return typeMap[type] || type
}

// 获取正确率颜色
const getAccuracyColor = (accuracy: number) => {
  if (accuracy >= 90) return '#67c23a'
  if (accuracy >= 70) return '#e6a23c'
  if (accuracy >= 60) return '#f56c6c'
  return '#ff4949'
}

// 获取掌握程度类型
const getMasteryLevelType = (level: number) => {
  if (level >= 4) return 'success'
  if (level >= 3) return 'warning'
  return 'danger'
}

// 获取掌握程度文本
const getMasteryLevelText = (level: number) => {
  if (level === 5) return '完全掌握'
  if (level === 4) return '基本掌握'
  if (level === 3) return '部分掌握'
  if (level === 2) return '掌握较差'
  return '未掌握'
}

// 初始化雷达图
const initRadarChart = () => {
  const chartDom = document.getElementById('radarChart')
  if (!chartDom) return
  
  radarChartInstance = echarts.init(chartDom)
  
  const option = {
    tooltip: {},
    legend: {
      data: ['正确率']
    },
    radar: {
      indicator: questionTypeStats.map(stat => ({
        name: stat.type,
        max: 100
      }))
    },
    series: [{
      name: '考试分析',
      type: 'radar',
      data: [{
        value: questionTypeStats.map(stat => stat.accuracyRate),
        name: '正确率',
        areaStyle: {
          color: 'rgba(64, 158, 255, 0.2)'
        },
        lineStyle: {
          color: '#409eff'
        },
        itemStyle: {
          color: '#409eff'
        }
      }]
    }]
  }
  
  radarChartInstance.setOption(option)
}

// 打印结果
const printResult = () => {
  ElMessage.success('打印功能待实现')
}

// 保存结果
const saveResult = () => {
  ElMessage.success('保存功能待实现')
}

// 返回模拟考试
const backToMockExam = () => {
  router.push({ name: 'MockExam' })
}

// 添加到错题本
const addToList = (_errorId: string) => {
  ElMessage.success('已添加到错题本')
}

// 查看相关知识点
const reviewRelated = (_errorId: string) => {
  ElMessage.success('跳转到相关知识点页面')
}

// 组件挂载时初始化
onMounted(() => {
  // 图表类型变化时重新初始化雷达图
  if ((chartType.value as string) === 'radar') {
    initRadarChart()
  }
  
  // 监听窗口大小变化，重新调整图表
  window.addEventListener('resize', () => {
    if (radarChartInstance) {
      radarChartInstance.resize()
    }
  })
  
  // 默认展开第一个错题
  if (errorQuestions.length > 0) {
    activeErrorPanel.value = [errorQuestions[0].id]
  }
})
</script>

<style lang="scss" scoped>
.result-analysis-view {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-overview {
  margin-bottom: 30px;
}

.overview-card {
  border-radius: 12px;
  overflow: hidden;
}

.overview-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.overview-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 10px 0;
}

.exam-basic-info {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.exam-type,
.exam-date,
.exam-duration {
  font-size: 14px;
  color: #6b7280;
}

.overview-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px;
  flex-wrap: wrap;
  gap: 30px;
}

.score-card {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px 60px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.score-number {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 10px;
}

.score-label {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.score-rating {
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 16px;
  border-radius: 20px;
  display: inline-block;
}

.exam-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  max-width: 600px;
  width: 100%;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 5px;
}

.stat-number.correct {
  color: #67c23a;
}

.stat-number.incorrect {
  color: #f56c6c;
}

.stat-number.unanswered {
  color: #e6a23c;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
}

.detailed-analysis {
  display: grid;
  gap: 30px;
}

.chart-card,
.error-classification-card,
.recommendations-card,
.answer-records-card {
  border-radius: 12px;
  overflow: hidden;
}

.chart-header,
.classification-header,
.recommendations-header,
.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
  gap: 15px;
}

.chart-header h2,
.classification-header h2,
.recommendations-header h2,
.records-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.chart-container {
  padding: 20px;
}

.accuracy-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accuracy-text {
  font-weight: 600;
  color: #4b5563;
  min-width: 50px;
  text-align: right;
}

.error-list {
  padding: 20px;
}

.no-errors {
  text-align: center;
  padding: 60px 20px;
}

.error-questions {
  max-height: 600px;
  overflow-y: auto;
}

.error-question-detail {
  padding: 20px;
}

.question-text {
  font-size: 16px;
  line-height: 1.8;
  color: #1f2937;
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.question-options {
  margin-bottom: 20px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 10px;
}

.option-item.your-answer {
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.option-item.correct-answer {
  border-color: #67c23a;
  background-color: #f0f9eb;
}

.option-label {
  font-size: 16px;
  font-weight: 600;
  color: #4b5563;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.option-content {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  flex: 1;
}

.answer-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  flex-shrink: 0;
}

.answer-tag.your {
  background-color: #fef0f0;
  color: #f56c6c;
}

.answer-tag.correct {
  background-color: #f0f9eb;
  color: #67c23a;
}

.error-analysis,
.correct-solution {
  margin-bottom: 20px;
}

.error-analysis h4,
.correct-solution h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 10px 0;
}

.error-analysis p,
.correct-solution p {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
  padding: 15px;
  background-color: #f8fafc;
  border-radius: 6px;
}

.error-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.error-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.recommendations-content {
  padding: 20px;
}

.recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recommendation-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 8px;
  align-items: flex-start;
}

.recommendation-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.recommendation-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.recommendation-text p {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

.records-content {
  padding: 20px;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e5e7eb;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-dot {
  position: absolute;
  left: -30px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #409eff;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.timeline-dot.correct {
  background-color: #67c23a;
}

.timeline-dot.incorrect {
  background-color: #f56c6c;
}

.timeline-dot.unanswered {
  background-color: #e6a23c;
}

.timeline-content {
  padding: 15px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.timeline-time {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.timeline-text {
  font-size: 14px;
  color: #4b5563;
}

.question-number {
  font-weight: 600;
  color: #1f2937;
}

.question-type {
  color: #6b7280;
  margin-left: 5px;
}

.answer-status {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.answer-status.correct {
  background-color: #f0f9eb;
  color: #67c23a;
}

.answer-status.incorrect {
  background-color: #fef0f0;
  color: #f56c6c;
}

.answer-status.unanswered {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.spent-time {
  margin-left: 10px;
  color: #6b7280;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .overview-content {
    flex-direction: column;
  }
  
  .exam-stats {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .chart-header,
  .classification-header,
  .recommendations-header,
  .records-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .score-card {
    padding: 20px 40px;
  }
  
  .score-number {
    font-size: 48px;
  }
  
  .recommendation-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>